<template>
	<nav>
		<!-- 顶部工具栏start -->
		<v-app-bar
			app
			flat
		>
			<!-- 控制侧边导航栏显示隐藏 -->
			<v-app-bar-nav-icon @click="drawer=!drawer"></v-app-bar-nav-icon>
			<v-app-bar-title class="grey--text text-uppercase">
				<span class="font-weight-light">欢迎登录，</span>
				<span>考试系统</span>
			</v-app-bar-title>
			<v-spacer></v-spacer>
			<!-- 选课功能start -->

			<v-dialog
				v-model="dialog"
				width="500"
				persistent
			>
				<template v-slot:activator="{ on, attrs }">
					<v-btn
						text
						v-bind="attrs"
						v-on="on"
						class="grey--text"
					>选课</v-btn>

				</template>

				<v-data-table
					:headers="headers"
					:items="desserts"
					:items-per-page="5"
					disable-sort
					class="elevation-1"
				>
					<template v-slot:item.action="{ item }">
						<v-btn
							color="success"
							@click="chooseLesson(item)"
							class="cuifan mr-4"
							:disabled="item.disabled"
						>
							选课
						</v-btn>
						<v-btn
							color="error"
							@click="cancelselectedLesson(item)"
						>
							取消
						</v-btn>

					</template>

				</v-data-table>
				<div style="background-color:white">
					<span class="ml-10">已选课程：{{classList.map(item=>item.cname)}}</span>
				</div>
				<div
					style="background-color:white"
					class="d-flex justify-center py-4"
				>

					<v-btn
						color="error"
						class="mr-4"
						@click="dialog = false"
					>退出</v-btn>
					<v-btn
						@click="chooseCoursesRightly"
						color="success"
					>确认</v-btn>
				</div>
			</v-dialog>
			<!-- 选课功能end -->

			<!-- 顶部导航栏start -->
			<v-menu offset-y>
				<template v-slot:activator="{on,attrs}">
					<v-btn
						text
						color="grey"
						v-on="on"
						v-bind="attrs"
					>
						<v-icon left>mdi-menu</v-icon>
						<span class="text-uppercase">菜单</span>
					</v-btn>
				</template>
				<v-list>
					<v-list-item
						v-for="link in links"
						:key="link.route"
						router
						:to="link.route"
					>
						<v-list-item-title>{{link.text}}</v-list-item-title>
					</v-list-item>
				</v-list>
			</v-menu>
			<!-- 顶部导航栏end -->

			<v-btn
				text
				color="grey"
				@click="signOut"
			>
				<span>注销</span>
				<v-icon right>mdi-arrow-right-thin-circle-outline</v-icon>
			</v-btn>
		</v-app-bar>
		<!-- 顶部工具栏end -->

		<!-- 侧边导航栏start -->
		<v-navigation-drawer
			v-model="drawer"
			app
			class="primary"
		>

			<!-- 个人信息模块start -->
			<v-row class="d-flex flex-column align-center">
				<!-- 头像显示与更换start -->

				<v-dialog max-width="440">
					<template v-slot:activator="{on,attr}">
						<v-responsive class="mt-10">
							<v-avatar size="100">
								<img
									src="/images/avatar-1.jpg"
									class="avatar"
									title="更换头像"
									v-on="on"
									v-bind="attr"
								>
							</v-avatar>
						</v-responsive>
					</template>
					<v-card>
						<v-card-title>更换头像</v-card-title>
						<v-card-text>
							<v-file-input
								accept="image/png, image/jpeg, image/bmp"
								placeholder="Pick an avatar"
								prepend-icon="mdi-camera"
								label="Avatar"
								@change="changeAvatar"
							></v-file-input>
							<v-btn
								class="success white--text mx-0"
								@click="confirmChange"
							>确认修改</v-btn>
						</v-card-text>
					</v-card>
				</v-dialog>

				<!-- 头像显示与更换end -->

				<!-- 个人信息展示与修改start -->
				<p class="white--text subtitle-1 mt-3">{{name}}</p>
				<ModifyInfo />
				<!-- 个人信息展示与修改end -->
			</v-row>
			<!-- 个人信息模块end -->
			<!-- 侧边导航start -->
			<!-- TODO:修改路由设计模式，实现有多个子路由的情况 -->

			<v-list>
				<v-list-item
					v-for="link in links"
					:key="link.route"
					router
					:to="link.route"
					class="d-flex justify-around"
				>
					<v-list-item-action class="ml-12">
						<v-icon class="white--text">{{link.icon}}</v-icon>
					</v-list-item-action>
					<v-list-item-content>
						<v-list-item-title class="white--text">{{link.text}}</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
			</v-list>

			<!-- 侧边导航end -->
		</v-navigation-drawer>
		<!-- 侧边导航栏end -->

	</nav>
</template>

<script>
// 顶部栏工具栏和侧边导航栏全局组件
import ModifyInfo from './ModifyInfo.vue'
import { teacherData, studentData } from '@/utils/navData.js'
import {
	getTeacherInfo,
	getStudentInfo,
	uploadAvatar,
	getAvatar,
	getAllColleges,
	chooseTeacherClasses,
	getAllTeacherCanTeach,
} from '@/api/Info'
import { getUserAccount } from '@/api/Login'

export default {
	name: 'NavBar',
	components: {
		ModifyInfo,
	},

	data() {
		return {
			// 1.用户个人信息
			account: '', // 用户账号
			name: '', // 姓名
			coid: '', //学院

			// 2.侧边导航栏
			drawer: true, // 控制侧边导航栏显示隐藏
			links: [], // 侧边导航栏导航条内容

			// 3.选课模块
			dialog: false, // 控制选课对话框隐藏
			courses: [], // 还能选的课程
			//课程列表头部提示信息
			headers: [
				{
					text: '课程序号',
					align: 'start',
					sortable: false,
					value: 'cid',
				},
				{ text: '课程名称', value: 'cname' },
				{ text: '操作', value: 'action' },
			],
			desserts: [], // 课程列表部分（后续代码会为每门课程添加一个变量disabled控制选课按钮的禁用）
			classList: [], // 记录用户所选课程
		}
	},

	created() {
		this.account = getUserAccount()
		// 获取老师/学生个人信息
		let requestsInfo = {
			s: getStudentInfo,
			t: getTeacherInfo,
		}
		requestsInfo[this.account[0]]({
			[this.account[0] + 'num']: this.account,
		})
			.then(({ data }) => {
				this.coid = data.coid
				this.name = data[this.account[0] + 'name']

				// 获取老师还能教授的所有课程列表（已经选的课不会再出现在列表中）
				if (this.account[0] === 't') {
					return getAllTeacherCanTeach({
						coid: this.coid,
						tnum: this.account,
					})
				}
			})
			.then((res) => {
				if (res) {
					this.desserts = res.data
					this.desserts.forEach((item) => {
						// 给每个课程添加disabled属性，控制用户选课之后按钮的禁用与恢复
						this.$set(item, 'disabled', false)
					})
				}
			})

		// 读取老师/学生动态路由，更新侧边导航栏
		let navLists = {
			t: teacherData,
			s: studentData,
		}
		navLists[this.account[0]].forEach((nav) => {
			// TODO: 如果存在路由嵌套怎么解决代码和布局
			if (nav.path) {
				this.links.push({
					text: nav.meta.text,
					route: '/home/' + nav.path,
					icon: 'mdi-steam',
				})
			}
		})

		this.formData = new FormData()

		this.formData.append('num', this.account)
	},

	methods: {
		// 退出,清除token,刷新页面
		signOut() {
			window.localStorage.removeItem('token')
			window.location.reload()
			this.$message({
				type: 'success',
				message: '注销成功',
			})
		},

		// TODO: 修改头像
		changeAvatar(data) {
			// 修改头像
			this.formData.set('qr_image', data)
		},

		confirmChange() {
			// 确认修改头像
			uploadAvatar(this.formData)
				.then(({ data }) => {
					console.log(data.msg)
					return getAvatar({
						num: this.account,
					})
				})
				.then((res) => {
					console.log(res)
				})
		},

		// 老师选课功能
		chooseLesson(course) {
			// 点击课程之后禁用选课按钮
			this.desserts.forEach((item) => {
				if (course.cid === item.cid) return (item.disabled = true)
			})

			this.classList.push({
				cid: course.cid,
				cname: course.cname,
			})
			this.$message({
				type: 'success',
				message: '添加课程' + course.cname + '成功',
			})
		},

		cancelselectedLesson(course) {
			// 取消这门课选课按钮的禁用
			this.desserts.forEach((item) => {
				if (course.cid === item.cid) return (item.disabled = false)
			})
			// 从已选课程中删除选择课程
			this.classList.forEach((item, index) => {
				if (item.cid === course.cid) {
					this.classList.splice(index, 1)
				}
			})
		},

		// 发送所有选课信息
		chooseCoursesRightly() {
			chooseTeacherClasses({
				tnum: this.account,
				classList: this.classList,
			}).then(() => {
				// 关闭选课弹窗
				this.dialog = false
				this.$message({
					type: 'success',
					message: '选课成功',
				})
				window.location.reload()
			})
		},
	},
}
</script>

<style scoped>
.avatar {
	cursor: pointer;
}
</style>
